<script lang="ts" setup>
defineProps({ title: String });
</script>

<template>
  <div class="help-container page-content-w">
    <h1 class="!mb-3 !mt-0">
      {{ title }}
    </h1>
    <slot />
  </div>
</template>

<style lang="scss" scoped>
$tit-text: 'my-2.5 !text-sys-text-head font-semibold';
$body-text: 'my-2.5 text-sm !text-sys-text-body leading-[18px]';

.help-container {
  --uno: 'p-4 #{$body-text}';

  :deep(h1) {
    --uno: '#{$tit-text} text-2xl';
  }

  :deep(h2) {
    --uno: '#{$tit-text} text-xl';
  }

  :deep(h3) {
    --uno: '#{$tit-text} text-base';
  }

  :deep(p) {
    --uno: '#{$body-text}';
  }

  :deep(a) {
    --uno: 'text-green underline';
  }

  :deep(li) {
    --uno: 'mb-2.5';

    &:last-child {
      --uno: 'mb-0';
    }
  }

  :deep(ul) {
    --uno: '#{$body-text} !list-none';

    li {
      --uno: 'relative pl-3.5';

      &::before {
        --uno: 'absolute left-0 top-0 text-[16px] text-sys-text-body content-['
          • ']';
      }
    }
  }

  :deep(ol) {
    --uno: '#{$body-text} !list-none';

    counter-reset: my-counter;

    li::before {
      content: ' ' counter(my-counter) '. ';
      counter-increment: my-counter;
    }
  }

  :deep(.pre-content) {
    --uno: 'rounded-2 bg-sys-layer-a p-4 !overflow-hidden';

    div {
      --uno: 'whitespace-pre !overflow-x-auto !overflow-y-hidden';
    }
  }
}
</style>
